﻿@model vnMcdonald.Models.Product

@{
    ViewBag.Title = "Detail";
}

    <div class="detail-product">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h3 id="myModalLabel">@Html.DisplayFor(modelItem => Model.Name)</h3>
        </div>
        <div class="modal-body">
            <div class="album-product" id="slide-album-image">
                @foreach(var item in Model.Images.Where(im => im.IsActive == 1)){
                  <img src="@item.Src" alt="@item.Name" />
                }
            </div>
            <div class="content-detail-product">
                <p class="description">@Html.DisplayFor(modelItem => Model.Description)</p>
                <p class="price">Giá: <span>@Html.DisplayFor(modelItem => Model.Price) VNĐ</span></p>
                @using (Ajax.BeginForm("AddToCart", "Cart", new { ProductId = Model.ProductId}, new AjaxOptions
                {                  
                    HttpMethod = "Post",
                    OnSuccess = "onSuccess"
                }))
                { 
                    @Html.AntiForgeryToken()
                <div class="row-fluid">
                <div class="pull-right"><input type="number" name="Quantity" id="input-quantity" /></div>
                </div>
                <div class="share">
                    <div id="fb-root"></div>
                    <script>
                        (function (d, s, id) {
                            var js, fjs = d.getElementsByTagName(s)[0];
                            if (d.getElementById(id)) return;
                            js = d.createElement(s); js.id = id;
                            js.src = "//connect.facebook.net/vi_VN/all.js#xfbml=1&appId=765040373512513";
                            fjs.parentNode.insertBefore(js, fjs);
                        }(document, 'script', 'facebook-jssdk'));

                    </script>
                    <div class="fb-share-button" data-href="http://@Request.Url.Host:@Request.Url.Port/Product/Detail?ProductId=@Model.ProductId" data-type="button_count"></div>
                    
                    <div class="pull-left google-plus">
                    <!-- Place this tag where you want the share button to render. -->
                    <div class="g-plus" data-action="share" data-width="130" data-annotation="bubble" data-height="24" data-href="http://@Request.Url.Host:@Request.Url.Port/Product/Detail?ProductId=@Model.ProductId"></div>
                     
                    <!-- Place this tag after the last share tag. -->
                    <script type="text/javascript">
                        window.___gcfg = { lang: 'vi' };

                        (function () {
                            var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
                            po.src = 'https://apis.google.com/js/plusone.js';
                            var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
                        })();
					</script>
                    </div>
                </div>
                <input type="submit" class="btn-order" value = "Đặt món" />
                }
            </div>
        </div>
    </div>
@if(Request.IsAjaxRequest())
{
    <script type="text/javascript">
        $(function () {
	        $('#input-quantity').ChangeQuantity();
	        $('#slide-album-image').cycle({
		        fx: 'curtainX',
		        sync: false,
		        delay: 100
	        });
	        
        });
    </script>
}
@section Scripts {
    <script type="text/javascript">
        $(function () {
            $('#input-quantity').ChangeQuantity();
            $('#slide-album-image').cycle({
                fx: 'curtainX',
                sync: false,
                delay: 100
            });
 
        });
    </script>
}
